<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { onMounted, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {newdate} from "../../date/date"
import {CreateProduct,GetProductidData,EditProduct} from "../../api/product"
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()
const ruleFormRef=ref()
const productForm=ref({
      name:"",
      brief :"",//简要
      detailed:"", //详细
      cover:"",
      date:newdate(new Date())
})
const rules=({
   name:[
    { required: true, message: '标题没有填写', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 3 to 500', trigger: 'blur' }
     ],
     brief:[
    { required: true, message: '内容不能为空', trigger: 'blur' },
    { min: 1, max: 500, message: '长度在 3 to 500', trigger: 'blur' }
     ],
    detailed:[
    { required: true, message: '内容不能为空', trigger: 'blur' },
    { min: 1, max: 500, message: '长度在 3 to 500', trigger: 'blur' }
     ],
     cover:[
    { required: true, message: '产品图片不能为空', trigger: 'blur' },
     ],
})
//根据id获取信息
const GetProductidDataData=async()=>{
     const res=await GetProductidData(route.query.id)
     productForm.value=res.data.data
     productForm.value.date=newdate(new Date())
}
onMounted(()=>{
   if(!route.query.id) return console.log("id不存在");
   GetProductidDataData()
   
})
//图片
const handleChange=async(response)=>{
    console.log(response);
     productForm.value.cover=response.url  
}
//添加产品
const submitForm=()=>{
     ruleFormRef.value.validate(async(valia)=>{
    if(valia){
        console.log("通过");
        const res=await CreateProduct(productForm.value)
        console.log(res.data);
        if(res.data.status==200){
        ElMessage({
         message:res.data.massage,
         type: 'success',
         })
         productForm.value.name=""
         productForm.value.brief=""
         productForm.value.detailed=""
         productForm.value.cover=""
        }else{
        ElMessage.error('创建失败')
        }
        
    }else{
        console.log("不能");  
    }
   })
}
//更新产品
const EditProductData=async()=>{
   console.log(productForm.value);
   
  ruleFormRef.value.validate(async(valia)=>{
    if(valia){
        // console.log("通过");
        const res=await EditProduct(productForm.value)
        console.log(res.data);
        if(res.data.status==200){
        ElMessage({
         message:res.data.massage,
         type: 'success',
         })
         productForm.value.name=""
         productForm.value.brief=""
         productForm.value.detailed=""
         productForm.value.cover=""
         router.push('/productlist')
        }else{
        ElMessage.error('创建失败')
        }
    }else{
        console.log("不能");  
    }
   })
}
</script>
<template>
    <div>
         <el-page-header icon="" content="添加产品" title="产品管理"></el-page-header>
         <el-card class="cardadd" style="max-width: 100%">
            <el-form
              ref="ruleFormRef"
              style="max-width: 100%"
              :model="productForm"
              :rules="rules"
              label-width="auto"
             >
             <el-form-item label="产品名称" prop="name">
                <el-input v-model="productForm.name" />
             </el-form-item>
             <el-form-item label="产品简要描述" prop="brief">
                <el-input type="textarea" :rows="6" v-model="productForm.brief" />
             </el-form-item>
             <el-form-item label="产品详细描述" prop="detailed">
                <el-input type="textarea" :rows="6" v-model="productForm.detailed" />
             </el-form-item>
             <el-form-item label="产品图片" prop="cover">
                <el-upload
                         class="avatar-uploader"
                         action="http://127.0.0.1:5000/amdin/imags/imag"
                        :on-success="handleChange"
                        :show-file-list="false"
                        >
                        <img v-if="productForm.cover" :src="productForm.cover" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                      </el-upload>
             </el-form-item>
             <el-form-item class="buttonbox">
                  <el-button type="primary" @click="submitForm" v-if="!route.query.id">
                    添加产品
                  </el-button>
                  <el-button type="primary" @click="EditProductData" v-else>
                    更新产品
                  </el-button>
                  </el-form-item>
             </el-form>
         </el-card>
    </div>
</template>
<style lang="less" scoped>
.cardadd{
    margin-top: 30px;
}
img{
    object-fit: cover;
}
.buttonbox{
    margin-top: 30px;
    margin-left: 100px;
}
// 图片样式
:deep(.avatar-uploader .avatar) {
  width: 178px;
  height: 178px;
  display: block;
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>